<template>
  <div class="nav-container">
    <router-link to="/merchant"><img src="../../assets/logo.png" class="logo-image"/></router-link>
    <div class="nav-user-info">
      <router-link to="/orders" v-if="this.$store.state.store.currentAuditStatus === 1 && this.$store.state.merchantUser.id"><span class="user-logio">订单管理</span></router-link>
      <router-link to="/productCard" v-if="this.$store.state.store.currentAuditStatus === 1 && this.$store.state.merchantUser.id"><span class="user-logio">商品管理</span></router-link>
      <router-link to="/storeMsg" v-if="this.$store.state.store.id && this.$store.state.merchantUser.id"><span class="user-logio">店铺信息</span></router-link>
      <router-link to="/merchant/applyStore" v-if="!(this.$store.state.store.id) && this.$store.state.merchantUser.id"><span class="user-logio">店铺注册</span></router-link>
      <router-link to="/merchantMsg" v-if="this.$store.state.merchantUser.id"><span class="user-logio">商家信息</span></router-link>
      <router-link to="/adPush" v-if="this.$store.state.store.currentAuditStatus === 1"><span class="user-logio">广告申请</span></router-link>

      <span class="user-name">下午好, {{ this.$store.state.merchantUser.username ? this.$store.state.merchantUser.username : 'Merchant' }} !</span>
        <router-link to="/merchant/login" v-if="!(this.$store.state.merchantUser.username)" class="user-logio">登录或注册</router-link>
      <el-badge :value="12" class="item">
      <img :src="this.$common.getResourceUrl(this.$store.state.merchantUser.image)" class="user-image"
           v-if="this.$store.state.merchantUser.image"/>
      <img src="../../assets/images/customer/default_user_icon.png" class="user-image" v-else/>
      </el-badge>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MerchantNav',
  methods: {
    logout () {
      this.$customerAPI.user_logout().then((params) => {
        this.$store.state.currentUser = {
          username: '',
          image: ''
        }
      })
    }
  },
  created () {
  }
}
</script>

<style scoped>
  a {
    text-decoration: none;
  }

  .nav-container {
    width: 100%;
    padding: 35px 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo-image {
    width: 284px;
    height: 58px;
    padding: 0 150px;
  }

  .nav-user-info {
    padding: 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .user-name {
    font-size: 16px;
    letter-spacing: 1px;
    color: white;
    margin-right: 32px;
  }

  .user-logio {
    font-size: 18px;
    letter-spacing: 3px;
    color: white;
    margin-right: 32px;
    cursor: pointer;
  }

  * {
    transition: all 0.4s;
  }

  .user-logio:hover {
    font-size: 1.5em;
  }

  .user-image {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
  }
</style>
